<route lang="json5">
{
  style: {
    navigationBarTitleText: '注册页面',
  },
}
</route>

<template>
  <view class="page">
    <image class="bg-blur-1" src="../../static/412.png" />

    <view class="group">
      <view class="background-container">
        <text class="welcome-text">欢迎注册商户</text>
        <text class="font account-title">手机号</text>
        <view class="email-display">
          <input v-model="phone" type="text" placeholder="请输入手机号" />
        </view>
        <text class="font account-password">密码</text>
        <view class="email-display2">
          <input v-model="password" type="password" placeholder="请输入密码" style="color: black" />
        </view>

        <text class="font account-password">验证码</text>
        <view style="margin-top: 36rpx;">
          <wd-input no-border type="text" size="large" placeholder="请输入..." v-model="captcha">
            <template #suffix>
              <button :disabled="current.seconds > 0" @click="getCode">{{ current?.seconds > 0 ? `${current?.seconds}秒后重新获取` :
                "获取验证码" }}</button>
            </template>
          </wd-input>
          <!-- <input v-model="password" type="password" placeholder="请输入密码" style="color: black" /> -->


        </view>

      </view>
    </view>

    <view class="input-container">
      <view class="login-button" @click="loginFn">
        <text class="login-text">注册</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { httpPost } from '@/utils/http'
import { useCountDown } from 'wot-design-uni/components/composables/useCountDown'

// 手机号
const phone = ref('')

// 密码
const password = ref('')

// 验证码
const captcha = ref('')


const { start, pause, reset, current } = useCountDown({
  time: 60 * 1000,
  onChange(current) {
    console.log('剩余时间', current)
  },
  onFinish() {
    console.log('倒计时结束')
  }
})

const getCode = () => {

  // 先检查手机号格式是否正确
  if (!phone.value.match(/^1[3456789]\d{9}$/)) {
    return uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    })
  }

  // 如果倒计时未结束，则不能点击
  if (current?.value.seconds > 0) {
    return uni.showToast({
      title: '请稍后再试',
      icon: 'none'
    })
  }

  httpPost('/api/app/user/login/getPhoneCode', { phone: phone.value }).then(res => {
    start()
  })



}

const loginFn = () => {
  httpPost('/api/app/user/info/register', {
    phone: phone.value, password: password.value,
    smsCode: captcha.value
  }).then(
    (res: any) => {
      console.log(res)

      uni.showToast({
        title: '注册成功',
        icon: 'success',
      })

      /* 返回上一页 */
      uni.navigateBack()
    },
  )
}

const youke = () => {
  // 跳到首页
  uni.redirectTo({
    url: '/pages/index/index',
  })
}

/* 注册 */
const register = () => {
  uni.navigateTo({
    url: '/pages/register/index',
  })
}
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(180deg, #ffffff 25.4%, #dcfcea 68.9%);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

.group {
  // padding: 436rpx 40rpx 140rpx;
  position: relative;
}

.font {
  font-size: 32rpx;
  color: #bbbbc4;
}

.account-title {
  margin-top: 80rpx;
  line-height: 30rpx;
}

.account-password {
  margin-top: 40rpx;
  line-height: 30rpx;
}

.password-title {
  margin-top: 140rpx;
  line-height: 30rpx;
}

.background-container {
  margin-top: 130rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
}

.bg-blur-1,
.bg-blur-2 {
  width: 100vw; // 设置为视口宽度
  height: auto; // 或者根据需要设置明确的高度
}

.bg-blur-1 {
  position: absolute;
  left: 200rpx;
  width: 656rpx;
  height: 752rpx;
  opacity: 0.5;
  filter: blur(100rpx);
}

.bg-blur-2 {
  position: absolute;
  left: -350rpx;
  // width: 656rpx;
  // height: 352rpx;
  opacity: 0.5;
  filter: blur(100rpx);
}

.register-button {
  margin-left: 30rpx;
  margin-top: 120rpx;
  width: 150rpx;
  padding: 16rpx;
  border: 2rpx solid #022e57;
  border-radius: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-button text {
  color: #022e57;
  font-size: 28rpx;
  line-height: 26.3rpx;
  font-family: HarmonyOSSansSC;
}

.welcome-text {
  left: 42rpx;
  top: 300rpx;
  color: #022e57;
  font-size: 64rpx;
  font-weight: 700;
  line-height: 60.16rpx;
  font-family: HarmonyOSSansSC;
}

.email-display {
  margin-top: 30rpx;
  padding: 36rpx 0 28rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.email-display input {
  margin-left: 36rpx;
  color: #08021c;
  font-size: 36rpx;
  line-height: 36rpx;
  font-family: HarmonyOSSansSC;
}

.email-display2 {
  margin-top: 30rpx;
  padding: 36rpx 0 28rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.email-display2 input {
  margin-left: 36rpx;
  color: #08021c;
  font-size: 36rpx;
  line-height: 36rpx;
  font-family: HarmonyOSSansSC;
}

.image-wrapper {
  margin-top: 70rpx;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 40rpx;
  text-align: center;
  width: 100%;

  image {
    height: 100rpx;
    width: 100rpx;
    margin: 20rpx;
  }
}

.input-container {
  margin-top: 40rpx;
  padding: 0 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
  z-index: 999;
}

.login-button {
  width: 100%;
  padding: 30rpx 0;
  background-image: linear-gradient(98.8deg, #fff157 -272.1%, #7eff2e 372.1%);
  border-radius: 16rpx;
  text-align: center;
}

.login-text {
  color: #022e57;
  font-size: 34rpx;
  line-height: 34rpx;
}

.forgot-password {
  margin-top: 50rpx;
  color: #bbbbc4;
  font-size: 32rpx;
}
</style>
